<template>
  <view class="container">
    <!-- 头部欢迎语 -->
    <view class="header">
      <text class="welcome-text">Welcome</text>
      <text class="slogan">浮生若梦，为欢几何</text>
    </view>

    <!-- 登录表单 -->
    <view class="form-container" v-if="!isRegister">
      <input 
        class="input" 
        placeholder="请输入手机号" 
        placeholder-class="placeholder"
        v-model="loginForm.username"
      />
      <!-- <input 
        class="input" 
        placeholder="请输入验证码" 
        placeholder-class="placeholder"
        password
        v-model="loginForm.password"
      /> -->
      <button class="btn primary" style="font-size:19px;" @tap="handleLogin">立即登录</button>
      
      <view class="action-links">
        <!-- <text @tap="switchToRegister">密码登录</text> -->
        <text @tap="handleContinue">继续浏览</text>
      </view>
    </view>

    <!-- 注册表单 -->
    <view class="form-container" v-else>
      <input 
        class="input" 
        placeholder="请输入手机号" 
        placeholder-class="placeholder"
        v-model="registerPhone"
      />
      <input 
        class="input" 
        placeholder="请输入登录密码" 
        placeholder-class="placeholder"
        password
        v-model="registerPassword"
      />
      <button class="btn secondary" @tap="handleLogin">立即登录</button>
	  <!-- <button class="btn secondary" @tap="handleRegister">立即登录</button> -->	  
      <view class="action-links">
        <text @tap="switchToLogin">验证码登录</text>
		<text @tap="handleContinue">继续浏览</text>
      </view>
    </view>
  </view>
</template>

<script>
import { getCodeImg,login } from '@/api/login'

export default {
  data() {
    return {
		captchaEnabled: true,
		globalConfig: getApp().globalData.config,
		isRegister: false,
		registerPhone: '',
		registerPassword: '',
		loginForm: {
		  username: "15618785577",
		  password: "",
		  code: "",
		  uuid: ''
		}	  
    }
  },
  created() {
    this.getCode()
  },
  methods: {
	// 获取图形验证码
	getCode() {
	getCodeImg().then(res => {
	  this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
	  if (this.captchaEnabled) {
		this.codeUrl = 'data:image/gif;base64,' + res.img
		this.loginForm.uuid = res.uuid
	  }
	})
	},
    handleLogin() {
        if (this.loginForm.username === "") {
          this.$modal.msgError("请输入您的账号")
        // } else if (this.loginForm.password === "") {
        //   this.$modal.msgError("请输入您的密码")
        }else {
          this.$modal.loading("登录中，请耐心等待...")
          this.pwdLogin()
        }	
      // 添加登录逻辑
    },

	  // 密码登录
	  async pwdLogin() {
		// login(this.loginForm.username,this.loginForm.password,this.loginForm.code,this.loginForm.uuid).then(res => {
		// 	console.log(res);
		// })
		this.$store.dispatch('Login', this.loginForm).then(res => {
		  console.log(res)
		  this.$modal.closeLoading()
		  // this.loginSuccess()
		}).catch(() => {
		  if (this.captchaEnabled) {
			this.getCode()
		  }
		})
	  },
	  // 登录成功后，处理函数
	  loginSuccess(result) {
		// 设置用户信息
		this.$store.dispatch('GetInfo').then(res => {
		  this.$tab.reLaunch('/pages/index')
		})
	  },
	
    handleRegister() {
      // 添加注册逻辑
    },
    switchToRegister() {
      this.isRegister = true
    },
    switchToLogin() {
      this.isRegister = false
    },
    handleContinue() {
      uni.switchTab({
        url: '/pages/index'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/* 主容器 */
.container {
  padding: 60rpx 40rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
}

/* 头部样式 */
.header {
  text-align: center;
  margin-bottom: 80rpx;
  
  .welcome-text {
    display: block;
    color: #fff;
    font-size: 56rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }
  
  .slogan {
    color: rgba(255,255,255,0.9);
    font-size: 28rpx;
  }
}

/* 表单容器 */
.form-container {
  background: #fff;
  border-radius: 24rpx;
  padding: 60rpx 40rpx;
  box-shadow: 0 10rpx 30rpx rgba(0,0,0,0.1);
  
  .input {
    height: 100rpx;
    border-bottom: 1rpx solid #eee;
    font-size: 32rpx;
    margin-bottom: 40rpx;
  }
  
  .placeholder {
    color: #ccc;
  }
}

/* 按钮样式 */
.btn {
  height: 96rpx;
  border-radius: 48rpx;
  font-size: 34rpx;
  margin: 60rpx 0 40rpx;
  
  &.primary {
    background: #4a90e2;
    color: #fff;
  }
  
  &.secondary {
    background: #7ed321;
    color: #fff;
  }
}

/* 操作链接 */
.action-links {
  display: flex;
  justify-content: space-between;
  
  text {
    color: #4a90e2;
    font-size: 28rpx;
  }
}
</style>